<template>
  <div class="relative" v-if="this.$store.state.token">
    <!-- 用户头像按钮 -->
    <button
      class="flex items-center space-x-2 p-1 rounded-xl hover:bg-gray-50/80 transition-all duration-200 focus:outline-none group"
      @click="toggleDropdown"
      :aria-expanded="isDropdownOpen"
      aria-haspopup="true"
      id="user-menu-button"
    >
      <div class="relative">
        <div
          class="w-10 h-10 rounded-full overflow-hidden ring-2 ring-white shadow-lg transform group-hover:scale-105 transition-all duration-300">
          <img
            :src="user.avatar"
            alt="用户头像"
            class="w-full h-full object-cover"
          />
        </div>
        <!-- VIP徽章 -->
        <div
          v-if="user.isVip"
          class="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center"
        >
          <i class="fas fa-crown text-white text-xs"></i>
        </div>
        <!-- 在线状态指示器 -->
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-400 rounded-full border-2 border-white"></div>
      </div>
      <div class="hidden md:block text-left">
        <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">{{ user.name }}</p>
        <p class="text-xs text-gray-500">{{ user.isVip ? "VIP用户" : "普通用户" }}</p>
      </div>
      <i
        class="fas fa-chevron-down text-xs text-gray-400 hidden md:inline-block transform group-hover:rotate-180 transition-transform duration-200"></i>
    </button>

    <!-- 下拉菜单卡片 -->
    <transition
      enter-active-class="transition ease-out duration-200"
      enter-from-class="opacity-0 scale-95 translate-y-1"
      enter-to-class="opacity-100 scale-100 translate-y-0"
      leave-active-class="transition ease-in duration-150"
      leave-from-class="opacity-100 scale-100 translate-y-0"
      leave-to-class="opacity-0 scale-95 translate-y-1"
    >
      <div
        v-show="isDropdownOpen"
        class="absolute right-0 mt-3 w-80 bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl border border-gray-100/50 z-[9999] transform origin-top-right overflow-hidden"
        @click.outside="closeDropdown"
        @keydown.escape="closeDropdown"
        role="menu"
        aria-labelledby="user-menu-button"
      >
        <!-- 顶部装饰渐变 -->
        <div class="h-1 bg-gradient-to-r from-[#a2d5c6] via-[#87CEEB] to-[#976df7]"></div>

        <!-- 用户信息区域 -->
        <div class="px-6 py-4 border-b border-gray-100/80">
          <button
            class="w-full flex items-center space-x-4 p-3 rounded-xl hover:bg-gradient-to-r hover:from-[#a2d5c6]/10 hover:to-[#87CEEB]/10 transition-all duration-300 group"
            @click="pushUser()"
          >
            <div class="relative">
              <div class="w-14 h-14 rounded-full overflow-hidden ring-3 ring-[#a2d5c6]/30 shadow-lg">
                <img :src="user.avatar" alt="用户头像" class="w-full h-full object-cover">
              </div>
              <div v-if="user.isVip"
                   class="absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center">
                <i class="fas fa-crown text-white text-xs"></i>
              </div>
            </div>
            <div class="flex-1 text-left">
              <h3 class="text-lg font-bold text-gray-400 group-hover:text-[#40aad4ff] transition-colors">{{ user.name
                }}</h3>
            </div>
            <i class="fas fa-chevron-right text-gray-400 group-hover:text-[#40aad4ff] transition-colors"></i>
          </button>
        </div>

        <!-- 数据统计区域 -->
        <div class="px-4 py-4 border-b border-gray-100/80">
          <div class="grid grid-cols-4 gap-2">
            <button
              @click="$router.push('/fans')"
              class="flex flex-col items-center p-3 rounded-xl hover:bg-[#a2d5c6]/10 transition-all duration-200 group"
            >
              <span
                class="text-xl font-bold text-gray-800 group-hover:text-[#62dbb7ff] transition-colors">{{ formatNumber(user.fans)
                }}</span>
              <span class="text-xs text-gray-500 mt-1">粉丝</span>
            </button>
            <button
              @click="$router.push('/follows')"
              class="flex flex-col items-center p-3 rounded-xl hover:bg-[#87CEEB]/10 transition-all duration-200 group"
            >
              <span
                class="text-xl font-bold text-gray-800 group-hover:text-[#40aad4ff] transition-colors">{{ formatNumber(user.follows)
                }}</span>
              <span class="text-xs text-gray-500 mt-1">关注</span>
            </button>
            <button
              @click="$router.push('/likes')"
              class="flex flex-col items-center p-3 rounded-xl hover:bg-[#FFB6C1]/10 transition-all duration-200 group"
            >
              <span
                class="text-xl font-bold text-gray-800 group-hover:text-[#fa3f5bff] transition-colors">{{ formatNumber(user.likes)
                }}</span>
              <span class="text-xs text-gray-500 mt-1">获赞</span>
            </button>
            <button
              @click="$router.push('/comments')"
              class="flex flex-col items-center p-3 rounded-xl hover:bg-[#976df7]/10 transition-all duration-200 group"
            >
              <span
                class="text-xl font-bold text-gray-800 group-hover:text-[#8b63e9ff] transition-colors">{{ formatNumber(user.comments)
                }}</span>
              <span class="text-xs text-gray-500 mt-1">评论</span>
            </button>
          </div>
        </div>

        <!-- 菜单选项区域 -->
        <div class="py-2">
          <button
            type="button"
            class="w-full flex items-center px-6 py-3 text-gray-700 hover:bg-[#a2d5c6]/10 hover:text-[#a2d5c6] transition-all duration-200 group"
            role="menuitem"
            @click="navigateTo('/profile')"
          >
            <div
              class="w-8 h-8 rounded-lg bg-[#a2d5c6]/10 flex items-center justify-center mr-3 group-hover:bg-[#a2d5c6]/20 transition-colors">
              <i class="fas fa-user text-[#a2d5c6]"></i>
            </div>
            <span class="font-medium">个人中心</span>
            <i class="fas fa-chevron-right ml-auto text-gray-400 group-hover:text-[#62dbb7ff] transition-colors"></i>
          </button>

          <button
            type="button"
            class="w-full flex items-center px-6 py-3 text-gray-700 hover:bg-[#87CEEB]/10 hover:text-[#87CEEB] transition-all duration-200 group"
            role="menuitem"
            @click="navigateTo('/posts')"
          >
            <div
              class="w-8 h-8 rounded-lg bg-[#87CEEB]/10 flex items-center justify-center mr-3 group-hover:bg-[#87CEEB]/20 transition-colors">
              <i class="fas fa-edit text-[#40aad4ff]"></i>
            </div>
            <span class="font-medium">我的帖子</span>
            <i class="fas fa-chevron-right ml-auto text-gray-400 group-hover:text-[#87CEEB] transition-colors"></i>
          </button>

          <button
            type="button"
            class="w-full flex items-center px-6 py-3 text-gray-700 hover:bg-[#976df7]/10 hover:text-[#8b63e9ff] transition-all duration-200 group"
            role="menuitem"
            @click="navigateTo('/settings')"
          >
            <div
              class="w-8 h-8 rounded-lg bg-[#976df7]/10 flex items-center justify-center mr-3 group-hover:bg-[#976df7]/20 transition-colors">
              <i class="fas fa-cog text-[#976df7]"></i>
            </div>
            <span class="font-medium">设置</span>
            <i class="fas fa-chevron-right ml-auto text-gray-400 group-hover:text-[#976df7] transition-colors"></i>
          </button>

          <!-- 分割线 -->
          <div class="mx-6 my-2 border-t border-gray-100"></div>

          <button
            type="button"
            class="w-full flex items-center px-6 py-3 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-all duration-200 group"
            role="menuitem"
            @click="logout"
          >
            <div
              class="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center mr-3 group-hover:bg-red-100 transition-colors">
              <i class="fas fa-sign-out-alt text-red-500"></i>
            </div>
            <span class="font-medium">退出登录</span>
            <i class="fas fa-chevron-right ml-auto text-gray-400 group-hover:text-red-500 transition-colors"></i>
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import defaultAvatar from "@/assets/default/userAvatar.jpg";

export default {
  name: "UserDropdown",
  data() {
    return {
      isDropdownOpen: false,
      user: {
        name: "",
        avatar: defaultAvatar,
        isVip: false,
        fans: 1234, // 粉丝
        follows: 567, // 关注
        likes: 8901, // 获赞
        comments: 234 // 评论
      }
    };
  },
  mounted() {
    this.user.name = this.$store.state.name || "新用户1768";
    // 如果 store 中没有头像，则保持 defaultAvatar
    if (this.$store.state.avatar) {
      this.user.avatar = this.$store.state.avatar;
    }
    this.user.isVip = this.$store.state.isVip;

    // 点击外部关闭下拉菜单
    document.addEventListener("click", this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handleClickOutside);
  },
  methods: {
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen;
    },
    closeDropdown() {
      this.isDropdownOpen = false;
    },
    handleClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.closeDropdown();
      }
    },
    logout() {
      this.closeDropdown();
      // 显示确认对话框
      if (confirm("确定要退出登录吗？")) {
        // 执行退出逻辑
        this.$store.dispatch("logout").catch(() => {
          // 如果没有logout action，直接清除token
          this.$store.commit("SET_TOKEN", "");
          this.$store.commit("SET_USER_INFO", {});
        });
        this.$router.push("/login");
      }
    },
    pushUser() {
      this.closeDropdown();
      this.$router.push({
        name: "user",
        query: { userId: this.$store.state.userId || "current" }
      });
    },
    navigateTo(path) {
      this.closeDropdown();
      this.$router.push(path);
    },
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + "w";
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + "k";
      }
      return num.toString();
    }
  }
};
</script>

<style scoped>
/* 毛玻璃效果 */
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .backdrop-blur-md {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

/* 头像悬停效果 */
.group:hover .w-10 {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(162, 213, 198, 0.3);
}

/* VIP徽章动画 */
@keyframes vipGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(253, 227, 32, 0.8);
  }
}

.w-4.bg-gradient-to-r.from-yellow-400 {
  animation: vipGlow 2s ease-in-out infinite;
}

/* 在线状态指示器动画 */
@keyframes onlinePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.bg-green-400 {
  animation: onlinePulse 2s ease-in-out infinite;
}

/* 数字统计悬停效果 */
.group:hover .text-xl {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* 菜单项悬停动画 */
.group:hover .w-8 {
  transform: scale(1.1) rotate(5deg);
  transition: all 0.2s ease;
}

/* 箭头图标动画 */
.group:hover .fa-chevron-right {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

/* 下拉菜单阴影增强 */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
  0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* 渐变装饰条动画 */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bg-gradient-to-r.from-\[\#a2d5c6\] {
  background-size: 200% 200%;
  animation: gradientFlow 3s ease infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .w-80 {
    width: 90vw;
    max-width: 320px;
  }
}

/* 滚动条样式 */
.overflow-hidden:hover {
  overflow-y: auto;
}

.overflow-hidden::-webkit-scrollbar {
  width: 4px;
}

.overflow-hidden::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-hidden::-webkit-scrollbar-thumb {
  background: rgba(162, 213, 198, 0.3);
  border-radius: 2px;
}

.overflow-hidden::-webkit-scrollbar-thumb:hover {
  background: rgba(162, 213, 198, 0.5);
}
</style>
